<template>
  <a-space :size="[xGap ?? 16, yGap ?? 0]">
    <guat-permission
      v-for="button in buttons"
      :permission="button.permission"
      :widthout-permission="!button.permission"
    >
      <a-button v-bind="createInternalButton(button)" @click="button.onClick">
        {{ button.text }}
      </a-button>
    </guat-permission>
  </a-space>
</template>

<script setup lang="ts">
import { omit } from "lodash-es";
import { ButtonType } from "./types";
import { buttons as btns } from "@/config/internal-style";

defineProps<{
  buttons: ButtonType[];
  xGap?: number;
  yGap?: number;
}>();

const createInternalButton = (btn: ButtonType) => {
  let _btn: Omit<ButtonType, "text"> = btn;
  if (btn.internal) Object.assign(_btn, btns[btn.internal]);
  return omit(_btn, "text", "internal");
};
</script>

<style scoped></style>
